<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <style>
    	progress{
    		accent-color:#0066cc;
    	}
    	</style>
</head>
<body>
      <div>
        <p>前端开发工程师|教师</p>
        <ul>
            <li><a href="#about" style="color:purple;">关于我</a></li>
            <li><a href="#skill" style="color:purple;">技能</a></li>
            <li><a href="#edu">教育背景</a></li>
            <li><a href="#contact">联系我</a></li>
        </ul>
    </div>

    <div id="about">
        <h2>关于我</h2>
        <img src="1-17.jpg" alt="个人头像">
        <h3>个人简介</h3>
        <p>我是一名热衷<strong>前端开发</strong>的教师，拥有4年的网页开发经验。我专注于创建<span style="background-color: yellow;">用户友好</span>且<span style="background-color: yellow;">响应式</span>的网页设计。</p>
        
        <h3>联系方式</h3>
        <p>邮箱: <a href="mailto:sami@example.com" style="font-style: italic;">sami@example.com</a></p>
        <p>电话: <a href="tel:+8613800008800" style="font-style: italic;">+86 138 0000 8800</a></p>
        <p style="font-style: italic;">地址: 天津市河西区</p>
    </div>
    
    <div id="skill">
        <h2>技能展示</h2>
        <p>我的技能水平</p>
        <table border="1" cellpadding="6" cellspacing="0">
            <tr>
                <th>技能</th>
                <th>熟练程度</th>
                <th>使用时间</th>
            </tr>
            <tr>
                <td>HTML</td>
                <td><progress value="100" max="100" width="100"></progress></td>
                <td>3年</td>
            </tr>
            <tr>
                <td>CSS</td>
                <td><progress value="90" max="100" width="100"></progress></td>
                <td>3年</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td><progress value="70" max="100" width="100"></progress></td>
                <td>2年</td>
            </tr>
            <tr>
                <td>响应式设计</td>
                <td><progress value="80" max="100" width="100"></progress></td>
                <td>2年</td>
            </tr>
        </table>
    </div>
     <div id="edu">
        <h2>教育背景</h2>
        <table border="1" cellpadding="6" cellspacing="0">
            <tr>
                <th>时间</th>
                <th>学校</th>
                <th>专业</th>
                <th>学历</th>
            </tr>
            <tr>
                <td>2000-2007</td>
                <td>某某大学</td>
                <td>计算机科学与技术</td>
                <td>本科</td>
            </tr>
            <tr>
                <td>1997-1999</td>
                <td>某某高级中学</td>
                <td>理科</td>
                <td>高中</td>
            </tr>
        </table>
    </div>

    <div>
        <h2>我的介绍视频</h2>
        <video width="300" controls>
            <source src="1-17.mp4" type="video/mp4">
            您的浏览器不支持视频播放
        </video>

        <h2>我的工作环境音乐</h2>
        <audio controls>
            <source src="1-17.mp3" type="audio/mp3">
            您的浏览器不支持音频播放
        </audio>
    </div>

    <div id="contact">
        <h2>联系我</h2>
        <form>
            <fieldset>
                <legend>个人信息</legend>
                <label>姓名: <input type="text"></label><br><br>
                <label>部门: <input type="text"></label><br><br>
                <label>电话: <input type="tel"></label><br><br>
            </fieldset>

            <fieldset>
                <legend>留言板</legend>
                <label>留言时间: <input type="date"></label><br><br>
                <label>留言: <textarea rows="4" cols="30"></textarea></label><br><br>
                <input type="submit" value="提交">
            </fieldset>
        </form>
    </div>

    <div>
        <p>&copy; 2025 晶晶的个人主页. 保留所有权利.</p>
        <p>关注我: <a href="https://github.com">GitHub</a></p>
    </div>
</body>
</html>